<template>

<el-dialog v-model="dialogVisible" :title="title" width="400">

    <el-form :model="formData" :rules="rules" ref="formRef" style="width: 100%;" label-width="110px">
        <el-form-item prop="cate_name" label="分类名称：">
            <el-input style="width:100%" placeholder="请输入分类名称" v-model="formData.cate_name" />
        </el-form-item>
        <el-form-item prop="cate_alias" label="分类别名：">
            <el-input placeholder="请输入分类别名" v-model="formData.cate_alias" />
        </el-form-item>
    </el-form>

    <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
    </template>
</el-dialog>

</template>

<script setup>
import { ref } from 'vue'
import { isEmpty } from '@/utils/objectUtils'
import { add$,update$ } from '@/api/article'

// defineProps({
//     mode: {
//         required: true,
//         type: String,
//         validator: (value) => {
//             const ret = ['NEW', 'EDIT'].includes(value)
//             if(!ret) throw '自定义组件 EditDialog 要求 mode 只可以是：NEW,EDIT'
//         }, 
//     }
// })

const emit = defineEmits(['refreshData']);

const formRef = ref()
const isNew = ref(false)
const title = ref('新增')
const rules = {
  cate_name: [
    {required: true, trigger: 'blur', message: '必须填写分类名称'},
  ],
  cate_alias: [
    {required: true, trigger: 'blur', message: '必须填写分类别名'},
  ]
}
// let formData = reactive({id:0,cate_name: '',cate_alias:''})
let formData = ref({id:0,cate_name: '',cate_alias:'',})
const dialogVisible = ref(false)


const updateTitle = data => {
    const ret = isEmpty(data)
    if(ret) {
        isNew.value = true
        title.value = '新增'
        return
    }
    const { id } = data
    if(id && id > 0) {
        isNew.value = false
        title.value = '修改'
    }
}
const open = data => {
    dialogVisible.value = true
    // if(isNew.value) data = {}
    formData.value = {...data}
    updateTitle(data)
    // const emptyObj = isEmpty(data)
    // if(emptyObj) {
    //     formData.value = {...{}}
    //     return
    // }

    // // 填充数据
    // formData.value = {...data}
}
const clearFormData = () => {// 清除表单数据

}
const close = () => {
    dialogVisible.value = false
    clearFormData()
}
const onSubmit = async () => {
    await formRef.value.validate(async (valid,fields) => {
        if(!valid){// 未验证通过逐条显示错误信息
            Object.keys(fields).map(key => {
                const item = fields[key]
                for(let rule of item){
                    ElMessage.error(rule.message)
                }
            })
            return
        }

        dialogVisible.value = false
        if(isNew.value){
            const {code,message} = await add$(formData.value)
            if(code === 0) emit('refreshData'); // 刷新父组件表格数据
            else ElMessage.error(message || '请求失败，请稍后再试！')
        }else{
            const {code,message} = await update$(formData.value)
            if(code === 0) emit('refreshData'); // 刷新父组件表格数据
            else ElMessage.error(message || '请求失败，请稍后再试！')
        }
    })
}

defineExpose({ open, close})
</script>